import React,{ Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { Row, Col, Card ,Tooltip,Form,Button,Modal,Spin,Input,Icon} from 'antd';
const FormItem = Form.Item;
import BasicTable from '../tables/BasicTable';
import SelectTable from '../tables/SelectTable';
import SortTable from '../tables/SortTable';
import SearchTable from '../tables/SearchTable';
import BreadcrumbCustom from '../BreadcrumbCustom';
import {loadCommonList,setCommonList,showCommonlistLoading,showCommonSearchLoading,LoadSearchExpert} from '../../action/Action';
import {ExpertList,ExpertForm} from '../Common';

class Main extends Component {
    constructor(props){
        super(props);
        /* 获取数据类型 */
        this.state = {
            confirmDirty: false,
        }
        this.handleSearch = (e) => {
            e.preventDefault();
            let {dispatch} = this.props;
            this.props.form.validateFieldsAndScroll((err, values) => {
                dispatch(showCommonSearchLoading(true))
                if (!err) {
                    dispatch(LoadSearchExpert('set_expert_list',values.name,values.org))
                }
            });
        };
    }

    componentWillMount(){
        let {dispatch} = this.props;
        dispatch(showCommonlistLoading(true));
        dispatch(setCommonList("set_expert_list",[]));
        dispatch(loadCommonList("set_expert_list","ExpertList",0,10));//初始加载
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const {CommonSystem} = this.props;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 14,
                    offset: 8,
                },
            },
        };
        return (
            <div className="">
                <BreadcrumbCustom first="专家" second="专家列表" />

                <Row gutter={16}>
                    <Col className="gutter-row" span={24}>
                        <Spin spinning={CommonSystem.searchLoading} delay={500} tip="正在搜索">
                            <div className="gutter-box">
                                <Card title="搜索查询" bordered={false}>
                                    <Form onSubmit={this.handleSearch} layout="inline">
                                        <FormItem
                                            {...formItemLayout}
                                            label={(
                                                <span>
                                            姓名&nbsp;
                                                    <Tooltip title="专家的真实姓名">
                                            <Icon type="question-circle-o" />
                                          </Tooltip>
                                        </span>
                                            )}
                                            hasFeedback
                                        >
                                            {getFieldDecorator('name', {
                                                rules: [{ required: true, message: '请输入姓名', whitespace: true }],
                                            })(
                                                <Input />
                                            )}
                                        </FormItem>
                                        <FormItem
                                            {...formItemLayout}
                                            label={(
                                                <span>
                                            机构&nbsp;
                                                    <Tooltip title="专家的真实机构">
                                            <Icon type="question-circle-o" />
                                          </Tooltip>
                                        </span>
                                            )}
                                            hasFeedback
                                        >
                                            {getFieldDecorator('org', {
                                                rules: [{ required: true, message: '请输入专家机构', whitespace: true }],
                                            })(
                                                <Input />
                                            )}
                                        </FormItem>
                                        <FormItem {...tailFormItemLayout}>
                                            <Button type="primary" htmlType="submit" size="large">搜索</Button>
                                        </FormItem>
                                    </Form>
                                </Card>
                            </div>
                        </Spin>
                    </Col>
                </Row>

                <ExpertList paginationFlag={true}/>
                <ExpertForm />
            </div>
        );
    }
}
export default connect(state=>({
    User: state.User,
    Expert:state.Expert,
    CommonSystem:state.CommonSystem
}))(Form.create()(Main));

